<template>
  <div class="edit">
    <a-modal v-model:visible="visible" title="编辑类型" @ok="onOk">
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="类型名称" v-bind="validateInfos.name">
          <a-input v-model:value="form.state.name" placeholder="请输入" maxlength="20" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { Form, message } from 'ant-design-vue'
  import { computed, reactive, watch } from 'vue'

  import { requestEditServiceType } from '/@/api/manage/openApiServiceType'
  import { HttpCodeEnum } from '/@/enums/httpEnum'

  const props = defineProps({
    visible: { type: Boolean, default: false },
    category: { type: Object, default: () => {} },
  })

  const emits = defineEmits(['update:visible', 'success'])

  const visible = computed({
    get: () => props.visible,
    set: (val: boolean) => emits('update:visible', val),
  })

  watch(
    () => visible.value,
    (newVal, oldVal) => {
      if (newVal && !oldVal) initData()
    },
  )
  const initData = () => {
    form.state.name = props.category.label
  }
  /** 表单配置 */
  const form = reactive({
    state: {
      name: '',
    },
    rule: {
      name: [{ required: true, message: '请输入类型名称' }],
    },
  })
  /** 表单hook */
  const { validate, validateInfos } = Form.useForm(form.state, form.rule)

  /**
   * 确定
   */
  const onOk = () => {
    validate()
      .then(async () => {
        console.log('..........', props.category)
        const { responseCode } = await requestEditServiceType({
          id: props.category.value,
          name: form.state.name,
        })
        if (responseCode === HttpCodeEnum.SUCCESS) {
          message.success('修改类型成功')
          visible.value = false
          emits('success')
        }
      })
      .catch(() => {})
  }
</script>

<style lang="less" scoped></style>
